<template>
	<view class="container">
		<view class="m-alert">
			<text>请务必保持信息与身份证件一致，否则将无法通过审核。</text>
		</view>

		<view class="m-form">
			<form @submit="subInfomation">
				<view class="u-form-itm">
					<view class="u-form-l">
						<image class="u-form-l-img" src="../../../static/icon/act-city.png" mode=""></image>
						<view class="u-label">姓名:</view>
					</view>
					<view class="u-form-r">
						<input class="u-ipt" placeholder="请填写姓名" name="name" :value="userInfo.name"
							:disabled="banDisabled" :class="banDisabled == true ? 'ban-color' : ''" />
					</view>
				</view>
				<view class="u-form-itm">
					<view class="u-form-l">
						<image class="u-form-l-img" src="../../../static/icon/act-city.png" mode=""></image>
						<view class="u-label">性别:</view>
					</view>
					<view class="u-form-r">
						<radio-group name="sex" class="u-radio">
							<radio value="1" :checked="userInfo.sex == 1" :disabled="banDisabled" />男
							<radio value="2" :checked="userInfo.sex == 2" :disabled="banDisabled" />女
						</radio-group>
					</view>
				</view>
				<view class="u-form-itm">
					<view class="u-form-l">
						<image class="u-form-l-img" src="../../../static/icon/act-city.png" mode=""></image>
						<view class="u-label">手机号:</view>
					</view>
					<view class="u-form-r">
						<input class="u-ipt" placeholder="请填写手机号" type="number" maxlength='11' name="phone"
							:value="userInfo.phone" @blur="regPhone" :disabled="banDisabled"
							:class="banDisabled == true ? 'ban-color' : ''" />
					</view>
				</view>
				<view class="u-form-itm">
					<view class="u-form-l">
						<image class="u-form-l-img" src="../../../static/icon/act-city.png" mode=""></image>
						<view class="u-label">证件类型:</view>
					</view>
					<view class="u-form-r">
						<picker mode="selector" :range="idList" range-key="name" :value="idTypeIndex"
							@change="idTypeChange" :disabled="banDisabled">
							<input class="u-ipt" placeholder="请选择证件类型" :value="idTypeName" disabled="true"
								:class="banDisabled == true ? 'ban-color' : ''" />
						</picker>
					</view>
				</view>
				<view class="u-form-itm">
					<view class="u-form-l">
						<image class="u-form-l-img" src="../../../static/icon/act-city.png" mode=""></image>
						<view class="u-label">证件号码:</view>
					</view>
					<view class="u-form-r">
						<input class="u-ipt" placeholder="请填写证件号码" name="idcard" :value="userInfo.card_number"
							@blur="regIdCard" :disabled="banDisabled" :class="banDisabled == true ? 'ban-color' : ''" />
					</view>
				</view>
				<view class="u-form-itm" v-if="navName == 'family_menber'">
					<view class="u-form-l">
						<image class="u-form-l-img" src="../../../static/icon/act-city.png" mode=""></image>
						<view class="u-label">房屋编号:</view>
					</view>
					<view class="u-form-r">
						<picker mode="selector" :range="roomList" range-key="door_number" :value="roomIndex"
							@change="roomChange">
							<input class="u-ipt" placeholder="请选择门牌号" :value="roomName" />
						</picker>
					</view>
				</view>
				<!-- 大头照 -->
				<view class="u-photo">
					<view class="u-photo-title">大头照(点击图片进行拍照)</view>
					<view class="u-photo-img">
						<image :src="userInfo.href ? userInfo.href : '../../../static/icon/camera.png'"
							mode="aspectFill" @click="camera"></image>
					</view>
				</view>
				<!-- 提交按钮 -->
				<!-- 是否是家庭成员 -->
				<view class="u-form-sub" v-if="navName == 'family_menber'">
					<button class="u-btn" type="default" form-type="submit">确定添加</button>
				</view>
				<view v-else>
					<!-- 初次注册 -->
					<view class="u-form-sub" v-if="isFirstRegister">
						<button class="u-btn" type="default" form-type="submit">注册信息</button>
					</view>
					<view class="u-form-sub" v-else>
						<button class="u-btn" type="default" form-type="submit" v-if="isChangeInfo">保存信息</button>
						<button class="u-btn" type="default" @click="changeInfo" v-else>修改信息</button>
						<button class="u-btn" type="default" @click="toAddIdentity">添加身份</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import USER from '@/api/user/index.js'
	import MD5 from '@/utils/md5.js'
	import REG from '@/utils/reg.js'

	let app = getApp();

	export default {
		data() {
			return {
				navName: '',
				address: '',
				address_id: '',
				roomList: [],
				roomIndex: 0, // 门牌号下标
				roomName: '', // 门牌号名
				room_id: '', // 门牌号id
				userInfo: {
					sex: "2",
					// href: 'https://tu.fengniaotuangou.cn/tmp_d0f51769f20cb338e48111b6440f478a.jpg'
				},
				idList: [{
						'name': '中国居民身份证',
						'type': 1
					}, {
						'name': '外国人永久居留身份证',
						'type': 2
					}, {
						'name': '港澳居民居住证',
						'type': 3
					},
					{
						'name': '护照',
						'type': 4
					}
				],
				idTypeIndex: '', // 证件类型下标
				idTypeName: '', // 证件类型的名字
				idType: '', // 证件类型

				// 上传照片
				suffix: '', // 后缀名
				key: '',
				uptoken: '',

				// 提交信息
				isFirstRegister: false, // 是否是第一次注册，是:true, 否:false
				banDisabled: false, // 禁用输入
				isChangeInfo: true, // 是否修改信息
				houseHold_id: '', // 审核未通过修改信息传该id
			}
		},
		onLoad(opt) {
			// family_menber
			var self = this;
			self.navName = opt.nav_name;
			console.log(self.navName)
			switch (opt.nav_name) {
				case "family_menber":
					uni.setNavigationBarTitle({
						title: '添加家庭成员',
						success() {
							self.userInfo = {
								sex: 1,
								// href: 'https://tu.fengniaotuangou.cn/tmp_d0f51769f20cb338e48111b6440f478a.jpg'
							};
							self.address = app.globalData.intoRentAddressName; // 地址名称
							self.address_id = app.globalData.intoRentAddressId; // 地址id
							self.getRoomList();
						}
					});
					break;
				case "register":
					uni.setNavigationBarTitle({
						title: '注册身份',
						success() {
							self.getMyInfo();
						}
					});
					break;
				default:
					if (opt.audit_state != 3) {
						self.banDisabled = true;
						self.isChangeInfo = false;
					} else {
						self.houseHold_id = opt.identity_id;
					}
					self.getMyInfo();
			}
		},
		mounted() {},
		methods: {
			// 获取地址的房间号
			getRoomList() {
				var self = this;
				USER.rooms(1, 10000, self.address_id).then(res => {
					self.roomList = res.data.data;
				})
			},

			roomChange(e) {
				var self = this;
				self.roomIndex = e.detail.value;
				self.roomName = self.roomList[self.roomIndex].door_number;
				self.room_id = self.roomList[self.roomIndex].id; // 选中的id
			},

			// 获取个人信息
			getMyInfo() {
				var self = this;
				uni.showLoading({
					title: '获取数据中，请稍候'
				});
				USER.myInfo().then(res => {
					uni.hideLoading();
					if (res.data) {
						self.userInfo = res.data;
						switch (self.userInfo.number_type) {
							case 1:
								self.idTypeName = "中国居民身份证";
								self.idType = 1;
								break;
							case 2:
								self.idTypeName = "外国人永久居留身份证";
								self.idType = 2;
								break;
							case 3:
								self.idTypeName = "港澳居民居住证";
								self.idType = 3;
								break;
							default:
								self.idTypeName = "护照";
								self.idType = 4;
						}
					} else {
						self.isFirstRegister = true;
					}
				})
			},

			// 提交信息
			subInfomation(e) {
				var self = this;
				console.log(e)
				self.userInfo.name = e.detail.value.name;
				self.userInfo.sex = e.detail.value.sex;
				self.userInfo.number_type = self.idType;

				// 必填姓名
				if (!self.userInfo.name) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					});
					return false;
				}
				// 必填手机号
				if (!self.userInfo.phone) {
					uni.showToast({
						title: '请填写正确手机号',
						icon: 'none'
					});
					return false;
				}
				// 证件类型选择
				if (!self.userInfo.number_type) {
					uni.showToast({
						title: '请选择证件类型',
						icon: 'none'
					});
					return false;
				}
				// 填写证件号码
				if (!self.userInfo.card_number) {
					uni.showToast({
						title: '请填写正确证件号码',
						icon: 'none'
					});
					return false;
				}
				// 上传人脸
				if (!self.userInfo.href) {
					uni.showToast({
						title: '请上传人脸',
						icon: 'none'
					});
					return false;
				}

				// 添加家庭成员
				if (self.navName == "family_menber") {
					self.userInfo.address = self.address;
					self.userInfo.address_id = self.address_id;
					self.userInfo.room_id = self.room_id;

					if (!self.userInfo.room_id) {
						uni.showToast({
							title: '请选择门牌号',
							icon: 'none'
						});
						return false;
					}
					uni.showModal({
						title: '提交信息',
						content: '信息提交将无法修改, 请确保信息与身份证件信息一致',
						cancelText: '暂不提交',
						confirmText: '确定提交',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '正在提交，请稍候'
								})
								USER.addFamilyMenber(self.userInfo).then(res => {
									uni.hideLoading();
									uni.showToast({
										title: '添加成功,请等待审核',
										success() {
											setTimeout(function() {
												uni.switchTab({
													url: '/pages/my/personal'
												})
											}, 3000)
										}
									})
								})
							} else if (res.cancel) {
								console.log('我已知晓');
							}
						}
					});
				} else {
					self.userInfo.houseHold_id = self.houseHold_id ? self.houseHold_id : '';
					uni.showModal({
						title: '提交信息',
						content: '信息提交将无法修改, 请确保信息与身份证件信息一致',
						cancelText: '暂不提交',
						confirmText: '确定提交',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '正在提交，请稍候'
								})
								USER.register(self.userInfo).then(res => {
									uni.hideLoading();
									if (self.isFirstRegister) {
										// 走注册路线
										uni.showModal({
											title: '注册成功',
											confirmText: '下一步，添加身份',
											showCancel: false,
											success(res) {
												if (res.confirm) {
													uni.navigateTo({
														url: '../addIdentity/index'
													})
												}
											}
										})
									} else {
										// 走修改路线
										uni.showToast({
											title: '提交成功,请等待审核',
											success() {
												setTimeout(function() {
													uni.reLaunch({
														url: '/pages/idChoose/index'
													})
												}, 3000)
											}
										})
									}
								})

							} else if (res.cancel) {
								console.log('我已知晓');
							}
						}
					});
				}
			},

			// 验证手机号
			regPhone(e) {
				var self = this;
				!REG.phone(e.detail.value) ? uni.showToast({
					title: "请输入正确的手机号",
					icon: 'none',
					success() {
						self.userInfo.phone = '';
					}
				}) : self.userInfo.phone = e.detail.value;
			},

			// 身份类型选择赋值
			idTypeChange(e) {
				var self = this;
				self.idTypeIndex = e.detail.value;
				self.idTypeName = self.idList[self.idTypeIndex].name;
				self.idType = self.idList[self.idTypeIndex].type;
			},

			// 身份证件验证
			regIdCard(e) {
				var self = this;
				console.log(111, self.idType)
				if (self.idType) {
					switch (self.idType) {
						case 1:
							REG.IDCard(e.detail.value) ? self.userInfo.card_number = e.detail.value : self.userInfo
								.card_number = '';
							break;
						case 2:
							REG.foreign(e.detail.value) ? self.userInfo.card_number = e.detail.value : self.userInfo
								.card_number = '';
							break;
						case 3:
							REG.HK(e.detail.value) ? self.userInfo.card_number = e.detail.value : self.userInfo
								.card_number = '';
							break;
						default:
							REG.passport(e.detail.value) ? self.userInfo.card_number = e.detail.value : self.userInfo
								.card_number = '';
					}
				} else {
					uni.showToast({
						title: '请先选择证件类型',
						icon: 'none'
					})
				}
			},

			// 照相
			camera() {
				var self = this;
				this.getToken();
				uni.chooseImage({
					sourceType: ['camera'],
					success(res) {
						self.suffix = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf(".") + 1);
						self.key = `tmp_${MD5.hashMD5(res.tempFilePaths[0])}.${self.suffix}`;
						uni.showLoading({
							title: '正在上传，请稍等'
						})
						uni.uploadFile({
							url: 'https://upload-z2.qiniup.com',
							name: 'file',
							filePath: res.tempFilePaths[0],
							formData: {
								'token': self.uptoken,
								'key': self.key
							},
							success: (uploadFileRes) => {
								uni.showToast({
									title: '上传成功'
								})
								uni.hideLoading();
								self.isChangeInfo = true;
								self.userInfo.href = `https://tu.fengniaotuangou.cn/${self.key}`;
								console.log(self.userInfo.href);
							},
							fail: (err) => {
								console.log('fail', err);
							}
						})
					}
				})
			},
			// 获取七牛云token
			getToken() {
				USER.getQiNiuToken().then(res => {
					this.uptoken = res.uptoken;
				})
			},

			// 修改信息
			changeInfo() {
				var self = this;
				self.isChangeInfo = true;
				uni.showToast({
					title: '只允许修改人脸图片',
					icon: 'none'
				})
			},

			// 添加身份
			toAddIdentity() {
				uni.navigateTo({
					url: '../addIdentity/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">

	
	.u-photo {
		margin: 30rpx 0;
		.u-photo-title {
			font-size: 28rpx;
		}
		
		.u-photo-img {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx;
			image {
				width: 300rpx;
				height: 300rpx;
			}
		}
	}

	// 禁用按钮
	.ban-color {
		color: #ccc;
	}
</style>
